<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欧宝</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
    <script src="js/acey_js.js"></script>
    <script type="text/javascript" src="Bootstrap/js/jquery.SuperSlide.2.1.1.js"></script>
    <style>
        *{margin: 0;padding: 0px}
        header{background-color: #20a1a1;height: 40px;width: 100%;position: fixed;top: 0px;z-index: 2;box-sizing: border-box}
        header input{width: 85%;height: 27px;margin-top: 7px;border: 0px solid #f8f8ff;margin-left: 3%;padding-left: 15px;}
        /*.glyphicon-search{margin-top: -1px}*/
        header span{color: white;font-size: 18px;margin-top: 10px;float: right;margin-right: 4%}
        ol, ul{  list-style: none;  }
        ol li {  float: left;  width: 5px;  height: 5px;  background-color: #f8f8ff;  text-align: center;  border-radius: 50%;  cursor: default;  margin-left: 10px;  }
        ol{  position: absolute;  right: 0;  bottom: 1px;  width: 110px;  }
        ol li.current{  background-color: red;  }
        .kind{width: 100%;height: 80px;border: 0px solid red;margin: 10px 0 30px 0}
        .kind div{width: 25%;border: 0px solid red;height: 80px;float: right;text-align: center;font-size: 10px}
        .kind img{width: 50px;height: 50px;border-radius: 25px;border: 0px solid red;margin: 3px auto; display: block}
        .kind span{margin-top: 5px;display: block}
        .hotInfo{width: 100%;border: 1px solid #f8f8ff;border-left:none;border-right:none;border-bottom: none;margin-bottom: 15px }
        .glyphicon-fire{display: block;margin-top: -26px;font-size: 18px;margin-left: 1%;color: red;font-weight: bold;}
        .hotInfo img{width: 100px;height: 100px;border-radius: 10px;padding: 5px}
        .title{display: block;margin-top: -17px;margin-left: 8%;}
        .hotInfo li{width: 100%;height: 102px;border-bottom: 4px solid #f8f8ff;margin-top: 5px}
        .product_title{position: absolute;margin-left: 1%;font-size: 13px;padding: 3px;color: black}
        .price{position: absolute;color: red;font-size: 16px;margin-top: 68px;font-weight: bold;margin-left: 1%}
        .number{position: absolute;margin-left: 34%;margin-top: 68px;font-size: 14px;color: gray}
        .jiaodiantu_top ul{margin: -30px 0 0 80px;position: absolute;}
        .jiaodiantu_top ul li{float: left;background: #646464;width: 6px;height: 6px;border-radius:3px;
            color: white;cursor: pointer;text-align: center;margin-left: 10px;z-index: 0;}
        .sale{width: 100%;height: 3px;background: #f8f8ff}
        .sale div{width: 50%;height: 220px;border: 0px solid #f8f8ff;float: left;border-bottom: 3px solid #f8f8ff;
            text-align: center;margin-top: -1px;}
        .sale_title{display: block;color: royalblue;font-size: 12px;line-height: 15px;padding-left: 10px;float: left;}
        .sale img{width: 100%;height: 77%;padding: 10px;border-radius: 15px}
        .sale_price{color: red;font-size: 16px;font-weight: bold;padding-left: 10px;margin-left: -51%;margin-top: 188px;position: absolute}
        .sale_number{position:absolute;color: gray;font-size: 10px;margin-top: 192px;margin-left: -20%}
        .foot{width: 100%;height: 240px;overflow: hidden;}
        .glyphicon-hand-down{color: #2aabd2;font-size: 20px;display: block;margin-left: 5px;margin-top: 5px}
        .sale_icon{margin-top: -20px;display: block;margin-left: 25px}
        .glyphicon-map-marker{font-size: 20px;color: #2aabd2;display: block;margin-top: 5px;margin-left: -5px}
        .foot_title{display: block;margin-top: -19px;margin-left: 15px}
        /*足迹css*/
        .picScroll-left{ width:100%;  overflow:hidden; position:relative;  border:1px solid #f8f8ff; margin: 8px 0 40px 0 ;border: 0px }
        .picScroll-left .hd{ overflow:hidden;  height:30px; padding:0 10px; margin-top: 5px; }
        .picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right;  margin-top:10px;  overflow:hidden;
            cursor:pointer; background:url("img/arrow.png") no-repeat;}
        .picScroll-left .hd .next{ background-position:0 -50px;  }
        .picScroll-left .hd .prevStop{ background-position:-60px 0; }
        .picScroll-left .hd .nextStop{ background-position:-60px -50px; }
        .picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
        .picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("img/icoCircle.gif") 0 -9px no-repeat; }
        .picScroll-left .hd ul li.on{ background-position:0 0; }
        .picScroll-left .bd{ padding:10px;width: 100%;overflow: hidden }
        .picScroll-left .bd ul{ overflow:hidden; zoom:1; }
        .picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
        .picScroll-left .bd ul li .pic{ text-align:center; }
        .picScroll-left .bd ul li .pic img{ width:100px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
        .picScroll-left .bd ul li .pic a:hover img{ border-color:#999; }
        .picScroll-left .bd ul li .title a{ color: red ;margin-top: 12px;}
        .picScroll-left .bd ul li .title{ line-height:24px; margin-top: 1px  }
        a:link{text-decoration: none}
    </style>
    <script>
            var num = 0;
            var arrBanner;
            var img_path_top = "";
            var img_path_buttom= "";
            var img_buttom_img_id= "";
            var list_num = "";
            var jiaodiantu;
            var userId =2;
            $(document).ready(function () {
                //我的足迹
                $.ajax({
                    url:"http://obao.tunnel.2bdata.com/user_footprints.htm?userId="+userId,
                    success:function (data){
                        for(var i=0;i<data.length;i++){
                            var str="";
                            var img = "http://obao.tunnel.2bdata.com/upload/product/"+data[i].productImg;
                            str+="<li >";
                            str+="<a href='info.html?"+data[i].productId+"' target='_parent' class='pic'><img src="+img+" />";
                            str+="<div class='title'>"+data[i].productName+"</div>";
                            str+="</a></li>"
                            $(".picList").append(str);
                            str = "";
                        }
                        $(".picScroll-left").slide(
                                {titCell:".hd ul",
                                    mainCell:".bd ul",
                                    autoPage:true,
                                    effect:"left",
                                    autoPlay:true,
                                    vis:3,
                                    trigger:"click"
                                });
                    }
                })
                //焦点图
                $.ajax({
                    url:"http://obao.tunnel.2bdata.com/product_banners.htm",
                    success:function (data){
                        arrBanner = new Array();
                        for(var i = 0; i < data.length; ++i){
                            arrBanner[i] = data[i].url;
                        }
                        var src="http://obao.tunnel.2bdata.com/upload/banner/"+data[0].url;
                        $("#img1").attr({src:src});
                    }
                })
                jiaodiantu = window.setInterval("change1()",2000);
                $(".jiaodiantu_top ul li").mouseover(function () {
                    change_jiaodiantu_top(this.id);
                    change_jiaodiantu_list(this.id);
                    num = this.id;
                });
            });
            function change1(){
                ++ num;
                if(num >= 4){
                    num = 0;
                }
                change_jiaodiantu_top(num);
                //序列号
                change_jiaodiantu_list(num);
            }
            function change_jiaodiantu_top(n){
                img_path_top = "http://obao.tunnel.2bdata.com/upload/banner/"+arrBanner[n];
                $("#img1").attr({src:img_path_top,alt: "Test Image" });
            }
            function change_jiaodiantu_list(n){
                list_num = "#"+n;
                $(".jiaodiantu_top ul li").css({background:"#969696"});
                $(list_num).css({background:"red"});
            }
            var width=$(window).width();
            //        $("#box_min_jiaodiantu").width(width);
            $("#img1").height(width/2);
            $("#img1").width(width);
            var img = document.getElementById("img1");
            //区域
            $.ajax({
                url:"http://obao.tunnel.2bdata.com/product_domains.htm",
                success:function (data){
                    for(var i=0;i<data.length;i++){
                        var str="";
                        var img = "http://obao.tunnel.2bdata.com/upload/domain/"+data[i].img;
                        str += "<div><a href='businesslist.html?"+data[i].domainId+"?"+data[i].name+"' target='_parent'>";
                        str += "<img src="+img+">";
                        str += "<span>"+data[i].name+"</span></a></div>";
                        $("#domain").append(str);
                    }
                }
            })
            // 热门商品
            $.ajax({
                url:"http://obao.tunnel.2bdata.com/product_hotProducts.htm?num=6",
                success:function (data){
                    var str="";
                    for(var i=0;i<data.length;i++){
                     str+="<a href='info.html?"+data[i].productId+"' target='_parent'><li>";
                     str+="<img src='http://obao.tunnel.2bdata.com/upload/product/"+data[i].productImg+"'>";
                     str+="<span class='product_title'>"+data[i].productName+"</span>";
                     str+="<span class='price'>￥"+data[i].newPrice+"元</span>";
                     str+="<span class='number'>销售量："+data[i].sales+"</span>";
                     str+="</li></a>";
                    }
                    $(".hot_product").html(str);
                }
            })
            // 促销商品
            $.ajax({
                url:"http://obao.tunnel.2bdata.com/product_promotionProducts.htm?num=11",
                success:function (data){
                    var str="";
                     for(var i=0;i<data.length;i++){
                         str+="<a href='info.html?"+data[i].productId+"' target='_parent'>";
                         str+="<div>";
                         str+="<img src='http://obao.tunnel.2bdata.com/upload/product/"+data[i].productImg+"'>";
                         str+="<span class='sale_title'>"+data[i].productName+"</span>";
                         str+="<span class='sale_price'>￥"+data[i].newPrice+"元</span>";
                         str+="<span class='sale_number'>"+data[i].sales+"人付款</span>";
                         str+="</div>";
                         str+="</a>";
                     }
                     $(".sale").html(str);
                }
            })
            //查询
    function search() {
        var content = $("#searchContent").val();
        if(content.trim() != ""){
            location.href = "searchlist.html?"+content.trim();
        }
    }
    </script>
</head>
<body >
  <header style="box-shadow: 2px 0 15px 5px #f8f8ff">
      <input type="search" placeholder="请输入搜索内容" id="searchContent">
      <span class="	glyphicon glyphicon-search" onclick="search()"></span>
  </header>
  <!--轮播图开始-->
  <div id="box_min_jiaodiantu" style="margin-top: 40px">
    <a href="#">
        <div class="jiaodiantu_top" >
            <a href="#" id="bannerUrl">
                <div class="banners">
                    <img src='' style='cursor: pointer;width: 100%;' id='img1'>
                </div>
              <ul>
                  <li id="1"></li>
                  <li id="2"></li>
                  <li id="3"></li>
                  <li id="4"></li>
              </ul>
            </a>
        </div>
    </a>
  </div>
<!--轮播图结束-->
<!--商品分类开始-->
  <div class="kind" id="domain">
      <!--<div>-->
          <!--<a href="#">-->
              <!--<img src="img/mi.png">-->
              <!--<span>餐饮大厦</span>-->
          <!--</a>-->
      <!--</div>-->
  </div>
<!--商品分类结束-->

 <!--热门商品开始-->
  <span class="glyphicon glyphicon-fire"></span>
  <span class="title">热门商品</span>
  <div class="hotInfo">
      <ul class="hot_product">
          <!--<li>-->
              <!--<a href="#">-->
                  <!--<img src="img/UHD8)BA_9NK~W4HR~J$%6015A.png">-->
                  <!--<span class="product_title">新疆大盘鸡拌面,好吃又实惠，美味可口，欢迎品尝</span>-->
                  <!--<span class="price">￥30元</span>-->
                  <!--<span class="number">销售量：245687</span>-->
              <!--</a>-->
          <!--</li>-->
      </ul>
  </div>
 <!--热门商品结束-->
  <!--促销商品开始-->
  <span class="glyphicon glyphicon-hand-down"></span>
  <span class="sale_icon">促销商品</span>
  <div class="sale">
      <!--<a href="#">-->
          <!--<div>-->
              <!--<img src="img/sp1.jpg">-->
              <!--<span class="sale_title">【新品】新疆大盘鸡拌面</span>-->
              <!--<span class="sale_price">￥30.8元</span>-->
              <!--<span class="sale_number">376人付款</span>-->
          <!--</div>-->
      <!--</a>-->
  </div>
  <!--促销商品结束-->
  <!--我的足迹开始-->
  <div class="foot">
      <div class="picScroll-left">
          <div class="hd">
              <a class="next"></a>
              <ul></ul>
              <a class="prev"></a>
              <span class="glyphicon glyphicon-map-marker"></span>
              <span class="foot_title"> 我的足迹</span>
          </div>
          <p style="height: 3px;width: 100%;background:#f8f8ff;"></p>
          <div class="bd" >
              <ul class="picList">
              </ul>
          </div>
      </div>
  </div>
  <!--我的足迹结束-->
</body>
</html>